<template>
  <div class="tag">
    <el-card class="app-container">
      <el-table v-loading="loading" :data="list" empty-text="草稿箱无内容" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column label="序号" width="80" align="center" type="index" :index="indexMethod">
        </el-table-column>
        <el-table-column label="文章标题" width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.title }}
          </template>
        </el-table-column>
        <el-table-column label="文章图片" width="200" align="center">
          <template slot-scope="scope">
            <img :src="$cloud + scope.row.img" width="180" height="80" alt="">
          </template>
        </el-table-column>
        <el-table-column label="标签" align="center">
          <template slot-scope="scope">
            <p v-for="(item,index) in scope.row.tags" :key="index">{{item.name}}</p>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.createdAt }}
          </template>
        </el-table-column>
        <el-table-column label="文章描述" align="center">
          <template slot-scope="scope">
            {{ scope.row.description }}
          </template>
        </el-table-column>
        <el-table-column label="SEO关键字" align="center">
          <template slot-scope="scope">
            {{ scope.row.seo }}
          </template>
        </el-table-column>

        <el-table-column label="排序" align="center">
          <template slot-scope="scope">
            {{ scope.row.sort }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="180" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id,scope.row.title)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- <div class="pagination">
        <el-pagination background :current-page.sync="searchForm.page" layout="total, prev, pager, next" :total="count" @current-change="handleCurrentChange" />
      </div> -->
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ArticleList',
  data() {
    return {
      loading:true,
      tagList: [],
      list: [],
      count: 0,
      size:10,
      searchForm: {
        id: '',
        title: '',
        status: '',
        tagId: '',
      },
    }
  },
  created() {
    this.getArticleList(1, 10)
    this.getTagList()
  },
  methods: {
    // 自定义表格索引
    indexMethod(index) {
      return (this.page - 1) * this.size + index + 1
    },
    // 获取标签列表
    getTagList() {
      this.$api.httpTagList().then((res) => {
        if (res.code == 200) {
          this.tagList = res.data
        }
      })
    },
    // 获取文章列表
    getArticleList(page, size) {
      this.loading = true
      this.$api.httpArticleDraft({ page, size }).then((res) => {
        if (res.code == 200) {
          this.list = res.data.rows || []
          this.count = res.data.meta.count
          this.loading = false
        }
      })
    },
    // 文章编辑
    handleEdit(id) {
      this.$router.push('/article/edit?id=' + id)
    },
    // 删除文章
    handleDelete(id, title) {
      this.$confirm(`是否删除文章 《${title}》 ?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api.httpArticleDetele(id).then((res) => {
            if (res.code == 200) {
              this.$message.success('删除成功')
              this.getArticleList()
            }
          })
        })
        .catch(() => {})
    },
    // 点击页码
    handleCurrentChange(page) {},
  },
}
</script>

<style scoped lang="scss">
.tag {
  box-sizing: border-box;
}
.search {
  margin-bottom: 14px;
}
.pagination {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}
</style>
